<template>
	<view class="pageBox">
		<view class="pagesTop">
			<image :src="`${baseUrl}/static/index/bg01.png`" style="width: 100%;height: 360rpx;"></image>
			<view class="appInfo">
				<view class="appImage">
					<image :src="`${baseUrl}/static/logo.png`" style="width: 160rpx;height: 160rpx;"></image>
				</view>
				<view class="appTip" v-if="pwdType == 1">修改登录密码</view>
				<view class="appTip" v-if="pwdType == 2">修改支付密码</view>
				<view class="appTip" v-if="pwdType == 3">设置支付密码</view>
			</view>
		</view>
		<view class="pageMain">
			<view class="inputBox">
				<view class="popupInput">
					<view class="myInputBox">
						<view class="myInputMain">
							<view class="iconBox"><u-icon name="phone" color="#2BA777" size="28"></u-icon></view>
							<u-input v-model="params.phone" placeholder="请输入手机号" disabled :clearable="false" style="flex: 1;margin-left: 8rpx;" maxlength="11" type="number" :border='false' :height="96"></u-input>
						</view>
					</view>
				</view>
				<!-- <view class="popupInput">
					<view class="myInputBox">
						<view class="myInputMain">
							<view class="iconBox"><u-icon name="attach" color="#2BA777" size="28"></u-icon></view>
							<u-input v-model="params.verify_code" placeholder="请输入验证码" :clearable="false" style="flex: 1;margin-left: 8rpx;" type="number" :border='false' :height="96"></u-input>
							<view class="codeBox" @click="getCodeBefore">{{tips}}</view>
						</view>
					</view>
				</view> -->
				<view class="popupInput">
					<view class="myInputBox">
						<view class="myInputMain">
							<view class="iconBox"><u-icon name="bag" color="#2BA777" size="28"></u-icon></view>
							<u-input v-if="pwdType == 1" v-model="params.pwd" placeholder="请输入新的登录密码" :clearable="false" style="flex: 1;margin-left: 8rpx;" type="text" :border='false' :height="96"></u-input>
							<u-input v-if="pwdType == 2" v-model="params.pwd" placeholder="请输入新的支付密码" :clearable="false" style="flex: 1;margin-left: 8rpx;" type="number" :border='false' :height="96"></u-input>
							<u-input v-if="pwdType == 3" v-model="params.pwd" placeholder="请输入支付密码" :clearable="false" style="flex: 1;margin-left: 8rpx;" type="number" :border='false' :height="96"></u-input>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 40rpx;">
				<my-submitBtn v-if="pwdType == 1 || pwdType == 2" :isFixed="false" bgColor="#fff" btnText="确认修改" @click="submitBefore"></my-submitBtn>
				<my-submitBtn v-if="pwdType == 3" :isFixed="false" bgColor="#fff" btnText="确认设置" @click="submitBefore"></my-submitBtn>
			</view>
		</view>
	</view>
</template>

<script>
	import { isLogin } from "../../mixins/isLogin.js"
	import { isUpdateNew } from "../../mixins/isUpdateNew.js"
	export default {
		mixins:[isLogin,isUpdateNew],
		data() {
			return {
				baseUrl:this.$baseUrl,
				// 输入框样式
				params:{
					phone:'',
					verify_code:'1',
					pwd:"",
					type:0
				},
				tips:'获取验证码',
				daoJiShi:60,
				// 获取验证码倒计时的执行事件
				timeCode:'',
				time:'',
				code:'',
				isWechat:'',
				scene:"",
				pwdType:0
			}
		},
		onLoad(options) {
			console.log("options",options);
			this.pwdType = options.type;
			this.params.type = options.type;
			if(this.params.type == 3) this.params.type = 2;
			this.updateNew();
			this.getUserInfo();
		},
		methods: {
			async getUserInfo(){
				let res = await uni.$http('POST','user/userInfo');
				console.log("用户信息",res);
				if(res.code == 1){
					this.params.phone = res.data.phone;
				}else if(res.msg.includes('登录')){
					
				}
			},
			// 获取验证码
			getCodeBefore(){
				console.log(this.params.phone);
				if(!uni.$u.test.mobile(this.params.phone)){
					uni.$u.toast(`请输入正确的手机号`);
				}else if(this.timeCode){
					uni.$u.toast(`请在${this.daoJiShi}秒后再次发送`);
				}else{
					uni.showLoading({
						title: '正在获取验证码',
						mask:true
					});
					setTimeout(()=>{
						this.getCode()
					},500)
				}
			},
			async getCode(){
				let res = await uni.$http('POST','user/sendSmsVerify',{phone:this.params.phone});
				console.log('获取验证码',res);
				uni.hideLoading()
				if(res.code == 1){
					this.timeCode = setInterval(()=>{
						if(this.daoJiShi <= 0){
							this.daoJiShi = 60;
							this.tips = '获取验证码'
							clearInterval(this.timeCode);
							this.timeCode = '';
						}else{
							this.daoJiShi = this.daoJiShi-1;
							this.tips = `重新获取(${this.daoJiShi})`
						}
					},1000)
				}else{
					uni.$u.toast(res.msg)
				}
			},
			submitBefore(){
				console.log(this.params);
				if(!uni.$u.test.mobile(this.params.phone)){
					uni.$u.toast(`请正确输入手机号`);
				}else if(!this.params.verify_code){
					uni.$u.toast('请输入验证码')
				}else if(!this.params.pwd){
					uni.$u.toast('请输入登录密码')
				}else if(!this.$u.test.enOrNum(this.params.pwd)){
					uni.$u.toast('登录密码只能为数字或字母')
				}else if(this.params.pwd && this.params.pwd.length < 6){
					uni.$u.toast('登录密码不能少于6位')
				}else{
					if(this.time){
						clearTimeout(this.time)
						this.time="";
					}
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					
					this.time = setTimeout(()=>{
						this.submit()
					},700)
				}
			},
			async submit(){
				let res = await uni.$http('POST','user/editPwd',this.params)
				console.log('修改登录密码',res);
				if(res.code == 1){
					uni.hideLoading()
					uni.$u.toast(res.msg)
					setTimeout(()=>{
						uni.navigateBack()
					},700)
				}else{
					uni.hideLoading()
					uni.$u.toast(res.msg)
				}
			},
			toZhuCe(){
				uni.navigateTo({
					url:'/pages/index/auth/bindPhone'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.pagesTop{
		position: relative;
		.appInfo{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0%;
			left: 0%;
			right: 0%;
			bottom: 0%;
			.appImage{
				font-size: 0%;
				border-radius: 50%;
				overflow: hidden;
			}
			.appTip{
				font-size: 36rpx;
				font-weight: 600;
				letter-spacing: 4rpx;
				margin-top: 16rpx;
			}
		}
	}
	.pageMain{
		padding-top: 16rpx;
		.inputBox{
			border-radius: 16rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.top{
				font-size: 38rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.imageBox{
				font-size: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.popupInput{
				width: 80%;
				margin-bottom: 32rpx;
				position: relative;
				.inputTitle{
					font-weight: 600;
					font-size: 28rpx;
					color: #000;
					margin-bottom: 10rpx;
				}
				// 自定义输入框
				.myInputBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.myInputMain{
						width: 100%;
						height: 96rpx;
						line-height: 96rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #000;
						background-color: #f7f7f7;
						border: 2rpx solid #ebeef5;
						border-radius: 66rpx;
						box-shadow: 0rpx 0rpx 6rpx #dcdfe6;
						padding: 0 24rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.iconBox{
							font-size: 0rpx;
							display: contents;
							align-items: center;
						}
						.codeBox{
							font-size: 26rpx;
							color: #2BA777;
						}
					}
				}
			}
		}
		.addressBox{
			width: 80%;
			font-size: 0%;
			background-color: #fff;
			border-radius: 16rpx;
			display: flex;
			// justify-content: center;
			align-items: center;
			position: relative;
			.addressMain{
				width: 100%;
				padding: 24rpx 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.addressInfoBox{
					width: 100%;
					display: flex;
					align-items: center;
					.imageBox{
						font-size: 0%;
						margin-right: 16rpx;
					}
					.infoMain{
						width: calc(100% - 80rpx);
						.infoTop{
							display: flex;
							align-items: center;
							.infoName{
								font-weight: 600;
								font-size: 30rpx;
								color: #000;
							}
							.infoPhone{
								font-weight: 400;
								font-size: 28rpx;
								color: #000;
							}
						}
						.infoBottom{
							font-weight: 400;
							font-size: 24rpx;
							color: #A1A5AA;
							margin-top: 8rpx;
						}
					}
					.addTip{
						font-weight: 600;
						font-size: 32rpx;
						color: #000;
						letter-spacing: 2rpx;
					}
				}
			}
		}
	}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>